<template>
  <div class="main-part">
    <div class="main-parn-sizer">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-switch-cell v-model="switch1" title="包邮" />
          <van-switch-cell v-model="switch2" title="团购" />
          <van-button block type="info" @click="onConfirm">确认</van-button>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div v-show="hotelList" class="main-parn-content" ref="wrapper">
      <div>
        <router-link to="/theroomlist">
          <van-card
            v-for="(item, index) in hotelList"
            :key="index"
            :tag="item.tag"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.thumb"
          >
            <div slot="footer">
              <van-button size="mini">按钮</van-button>
              <van-button size="mini">按钮</van-button>
            </div>
          </van-card>
        </router-link>
      </div>
    </div>
    <div v-show="!hotelList" class="noData">暂无数据</div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: {
    hotelList: Array
  },
  data() {
    return {
      value: "a",
      switch1: false,
      switch2: false,
      option: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" }
      ]
    };
  },
  mounted() {
    // 页面初始化时创建滚动模块
    const options = {
      click: true,
      tap: true
    };
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, options);
      } else {
        this.scroll.refresh();
      }
    });
  },

  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    }
  }
};
</script>

<style lang="stylus" scoped>
.main-parn-content {
  position: absolute;
  top: 2.32rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.main-parn-sizer {
  position: relative;
  top: 1rem;
}

.noData {
  position: absolute;
  top: 2.32rem;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.5rem;
}
</style>
